<template>
  <div class="box">
    <van-nav-bar
      title="个人信息"
      left-arrow
      fixed
      placeholder
      z-index="999"
      @click-left="$router.back()"
    />
    <div class="dataLists">
      <!-- 头像修改 -->
      <div class="img">
        <i>头像</i>
        <input
          id="file"
          accept="image/*"
          @change="chooseImg"
          type="file"
          style="display: none"
        />
        <label for="file" class="iconfont">
          <van-image
            width="60"
            height="60"
            round
            :src="userInfo.avatar"
          />
        </label>

        <span> <van-icon name="arrow" /></span>
      </div>
      <div class="userinfo-item">
        <i>昵称</i>
        <input
          type="text"
          v-model="userInfo.nickname"
          placeholder="请输入昵称"
        />
      </div>
      <div class="userinfo-item">
        <i>名字</i>
        <input
          type="text"
          :value="userInfo.username"
          placeholder="请输入昵称"
          readonly
        />
      </div>
      <!--  性别这里不是让我们去填写的  是让我们去选择的  -->
      <div class="userinfo-item" @click="sexShowPicker = true">
        <i>性别</i>
        <input
          type="text"
          placeholder="请设置性别"
          :value="userInfo.gender"
          readonly
        />
      </div>

      <div class="userinfo-item" @click="cityShowPicker = true">
        <i>地址</i>
        <input
          type="text"
          :value="userInfo.addr"
          placeholder="请选择地址"
          readonly
        />
      </div>
    </div>

    <!-- 按钮 -->
    <div class="userinfo-btn">
      <van-button type="primary" color="#da281c" @click="submit" size="large"
        >保存</van-button
      >
    </div>

    <!--   弹出层 -->

    <!--   性别选择 弹出层 -->
    <van-popup v-model="sexShowPicker" round position="bottom">
      <van-picker
        show-toolbar
        :columns="['男', '女']"
        @cancel="sexShowPicker = false"
        @confirm="sexPickerConfirm"
      />
    </van-popup>

    <!--  性别选择 弹出层 -  end   -->

    <!--   城市选择 -->
    <van-popup v-model="cityShowPicker" round position="bottom">
      <van-area
        @cancel="cityShowPicker = false"
        @confirm="cityPickerConfirm"
        :area-list="areaList"
        :value="userInfo.addrCode || ''"
      />
      <!-- value是默认值  -->
    </van-popup>

    <!-- 万一   你有很多个地方需要选  封装? -->
  </div>
</template>

<script>
import { Picker, Popup, Area } from "vant";
import { areaList } from "@vant/area-data"; //  json数据
// console.log(areaList);

import userInfoMix from './userInfo.mixin'
export default {
  name: "userInfo",
  data() {
    return {
      sexShowPicker: false, // 性别选择框的显示隐藏
      cityShowPicker: false, // 城市选择框的显示隐藏
      userInfo: {},
      areaList,
    };
  },
  components: {
    [Picker.name]: Picker,
    [Popup.name]: Popup,
    [Area.name]: Area,
  },
  mixins:[userInfoMix],

  created() {
    //1 .  配合 watch
    // this.userInfo = JSON.parse(JSON.stringify(this.$root.userInfo));//   因为如果不深拷贝一下 一会儿改数据  会污染原数据的

    //2.   没那么严谨  但是节省

    // let userInfo = localStorage.getItem('xl-userInfo');
    //   if(userInfo){
    //     this.userInfo = JSON.parse(userInfo);
    //   }

    //3 从服务器拿
    //   更加的严谨   但是也浪费
    this.getUserInfo();

    // userInfo的数据搞到   数据回填
  },
  methods: {
    //  getUserInfo
    getUserInfo() {
      let token = localStorage.getItem("xl-token");

      if (!token) {
        this.$toast("缺少参数");
        setTimeout((v) => {
          this.$router.back();
        }, 800);
        return;
      }

      this.$http
        .post("/apis/user/kh/getMyUserInfo", {
          uni_id_token: token,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 0) {
            this.userInfo = res.userInfo;
          } else {
            this.$toast(res.msg);
          }
        });
    },
    // 确定选择性别
    sexPickerConfirm(val) {
      this.sexShowPicker = false;
      this.userInfo.gender = val;
      this.$forceUpdate();
    },
    // 确定选择城市
    cityPickerConfirm(data) {
      this.cityShowPicker = false;
      // console.log(e)

      let addrCode = data[data.length - 1].code;
      let addr = data.map((v) => v.name).join("-");

      this.userInfo.addr = addr;
      this.userInfo.addrCode = addrCode;
      this.$forceUpdate();
    },

    getUploadToken() {
      return this.$http.get(
        "https://d33a5037-6c63-4e92-8bb1-30018ab701ea.bspapp.com/http/upload/token"
      );
    },

    // 选择图片事件
    async chooseImg(e) {
      console.log();

      //  选择完就上传

      let file = e.target.files[0];
      console.log(file);
      //  先去申请一个token
      try {
        let { token } = await this.getUploadToken();

        console.log(token);

        //  file  token  和文件名 一起发给七牛云的服务器
        let exname = file.name.slice(file.name.lastIndexOf(".") + 1);
        let key = `${new Date().getTime()}_${Math.random()
          .toString(36)
          .slice(2)}.${exname}`;
        let formData = new FormData();

        formData.append("token", token);
        formData.append("file", file);
        formData.append("key", key);
        this.$http
          .post("https://upload-z1.qiniup.com", formData)
          .then((res) => {
            console.log(res);

            this.userInfo.avatar = `http://toutiao.longxiaokj.com/` + res.key;

            this.$forceUpdate();
          });
      } catch (error) {
        console.log(error);
        this.$toast(error);
      }
    },
  },
};
</script>

<style lang="scss">
.box {
  .step {
    padding: 15px;
    p {
      font-size: 16px;
      margin-bottom: 15px;
    }
  }

  i {
    font-style: normal;
  }
  .dataLists > div {
    position: relative;
    font-size: 17px;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    // border-bottom: 1px solid #ccc;

    &::after {
      display: block;
      position: absolute;
      bottom: 0;
      left: 15px;
      right: 15px;
      background: #ccc;
      height: 1px;
      content: "";
    }

    .iconfont {
      font-size: 38px;
    }
    span {
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);

      color: rgb(222, 222, 222);
    }
    input {
      width: 220px;
      text-align: right;
      color: #333;
      line-height: 36px;
      height: 36px;
    }
    input::placeholder {
      color: #aaa;
    }
    .type {
      width: 150px;
      overflow: auto;
      display: inline-block;
      white-space: nowrap;
      text-align: right;
    }
  }
  ::v-deep .van-checkbox-group {
    width: 130px;
    padding: 15px;
  }
  ::v-deep .van-checkbox {
    padding: 15px 0;
  }
  .userinfo-btn {
    padding: 10px 15px;
    margin-top: 40px;
  }
}
</style>